<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">click</button>
    <script>
       // 防抖是以用户在最后一次触发的延迟时间后执行事件，防止多次触发导致的性能消耗
        //1.创建一个嵌套函数，它的入参是回调函数和延迟
        //2.通过一个定时器去执行回调函数，但是执行前要清除上一个定时器
        
        function debounce(callback,timeout){
            let timer=null;
            return function(args){
                clearTimeout(timer);
                timer=setTimeout(callback(args),timeout)
            }
        }
        // 正常调用方式
        // {
        //     const btn =document.querySelector('#btn');

        //         btn.onclick=debounce(()=>{
        //                 console.log('我想请求接口')
        //             },1000)


        //         function debounce(callback,wait){
        //             let timer=null
        //             return function(){
        //                 clearTimeout(timer)
        //                 timer=setTimeout(callback,wait)
        //             }
        //         }
        // }

        function debounce(callback,wait){
                    let timer=null
                    // 返回函数让Onclick执行，所以onclick执行的时候会传入event参数
                    return function(event){
                        clearTimeout(timer)
                        timer=setTimeout(callback(event),wait)
                    }
        }
         // 匿名函数调用debounce,  没效果   
        {
            // const btn =document.querySelector('#btn');

            //     btn.onclick=()=>{
                    

            //         console.log('我要执行')
            //         // 因为onclick执行的是外面的函数，所以返回debounce不会自动执行，需要手动触发
            //        return debounce(()=>{
            //             console.log('我想请求接口')
            //         },1000)()

            //     }   
        }
        
        // 原代码重构
        {
            const btn =document.querySelector('#btn');

            // 原代码
            // btn.onclick=()=>{
            //     console.log('我要执行')
            // }

            // 把匿名函数包裹成callback传进去

            btn.onclick=debounce((event)=>{
                console.log(event)
            },1000)


        }
       
    </script>
</body>
</html>